<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣App-书影音-电影详情</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/app-public.css">
    <link rel="stylesheet" href="./css/app-movie-public.css">
    <link rel="stylesheet" href="./css/app-movie-detail.css">
</head>
<body>
    <canvas id="myCanvas" style="display: none;"></canvas> 
    <div class="mobile">
        <header>
            <div class="functional_domain flexBox">
                <span class="back iconfont">&#xe679;</span>
                <div class="occupying_area flexBox">
                    <ul>
                        <li class="top">电影</li>
                        <li class="flexBox scroll_bottom"></li>
                    </ul>
                </div>
                <span class="more iconfont">&#xe719;</span>
            </div>
        </header>
        <main>
            <!-- 电影信息 -->
            <section class="movieInfo flexBox"></section>

            <!-- 豆瓣评分 -->
            <section class="ratingArea"></section>

            <!-- 选座购票模块 -->
            <section class="ticketPurchase">
                <div class="hd flexBox">
                    <div class="title flexBox">
                        <span class="iconfont"></span>
                        选座购票
                    </div>
                    <div class="all_more flexBox">
                        <span class="platform"></span>
                        <span class="iconfont">&#xe6a3;</span>
                    </div>
                </div>
            </section>

            <!-- 简介 -->
            <section class="introduction"></section>

            <!-- 演职员 -->
            <section class="castMembers"></section>

            <!-- 预告片 / 海报 -->
            <section class="trailerStills"></section>

            <!-- 短评 -->
            <section class="shortComments"></section>

            <!-- 喜欢这部电影的人也喜欢 -->
            <!-- <section class="guess_you_like">
                <div class="hd flexBox">
                    <span class="title">喜欢这部电影的人也喜欢</span>
                    <span class="all_more">
                        全部<span class="iconfont">&#xe6a3;</span>
                    </span>
                </div>
                <div class="bd">
                    <div class="container">

                    </div>
                </div>
            </section> -->

            <!-- 影评和讨论 -->
            <div class="film_review">
                <div class="review_container">
                    <div class="film_review_head">
                        <div class="module_switch flexBox">
                            <a href="javascript:void(0);" class="current" data-index="1">影评</a>
                            <a href="javascript:void(0);"  data-index="2">讨论</a>
                            <span class="afterSlider"></span>
                        </div>
                    </div>
                    <div class="main">
                        <ul class="flexBox">
                            <li class="reviewList">
                                <div class="head flexBox">
                                    <div class="text">影评列表</div>
                                    <div class="tagSwitch">
                                        <div class="container flexBox">
                                            <div class="tag" data-index="1">热门</div>
                                            <div class="tag" data-index="2">最新</div>
                                            <div class="tag" data-index="3">友邻</div>
                                        </div>
                                        <div class="moveBox"></div>
                                    </div>
                                </div>
                                <div class="main">
                                    <div class="reviewItem">
                                        <div class="userInfo flexBox">
                                            <div class="user">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">慢慢慢生活</span>
                                            </div>
                                            <div class="rating flexBox">
                                                <span class="status">看过</span>
                                                <span class="rating_stars small flexBox" data-rating="5">
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                </span>
                                            </div>
                                            <div class="releasedTime">昨天 01:16</div>
                                        </div>
                                        <div class="content">
                                            <div class="title">弱国无外交（会部分剧透）</div>
                                            <div class="text">
                                                看完感触很多。最主要是，在每一次撤侨行动中，外交官司令官工作人员都是最美的逆行者。弱国无外交。只有到了国外，才会无比感谢祖国能够昌盛繁荣强大起来。这样无论是政府军还是反叛军，拿枪指着你的时候都会有所顾忌。在那些战火纷乱的地方，中国护照是你的保命符、通行证。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="reviewItem">
                                        <div class="userInfo flexBox">
                                            <div class="user">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">慢慢慢生活</span>
                                            </div>
                                            <div class="rating flexBox">
                                                <span class="status">看过</span>
                                                <span class="rating_stars small flexBox" data-rating="5">
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                </span>
                                            </div>
                                            <div class="releasedTime">昨天 01:16</div>
                                        </div>
                                        <div class="content">
                                            <div class="title">弱国无外交（会部分剧透）</div>
                                            <div class="text">
                                                看完感触很多。最主要是，在每一次撤侨行动中，外交官司令官工作人员都是最美的逆行者。弱国无外交。只有到了国外，才会无比感谢祖国能够昌盛繁荣强大起来。这样无论是政府军还是反叛军，拿枪指着你的时候都会有所顾忌。在那些战火纷乱的地方，中国护照是你的保命符、通行证。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="reviewItem">
                                        <div class="userInfo flexBox">
                                            <div class="user">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">慢慢慢生活</span>
                                            </div>
                                            <div class="rating flexBox">
                                                <span class="status">看过</span>
                                                <span class="rating_stars small flexBox" data-rating="5">
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                </span>
                                            </div>
                                            <div class="releasedTime">昨天 01:16</div>
                                        </div>
                                        <div class="content">
                                            <div class="title">弱国无外交（会部分剧透）</div>
                                            <div class="text">
                                                看完感触很多。最主要是，在每一次撤侨行动中，外交官司令官工作人员都是最美的逆行者。弱国无外交。只有到了国外，才会无比感谢祖国能够昌盛繁荣强大起来。这样无论是政府军还是反叛军，拿枪指着你的时候都会有所顾忌。在那些战火纷乱的地方，中国护照是你的保命符、通行证。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="reviewItem">
                                        <div class="userInfo flexBox">
                                            <div class="user">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">慢慢慢生活</span>
                                            </div>
                                            <div class="rating flexBox">
                                                <span class="status">看过</span>
                                                <span class="rating_stars small flexBox" data-rating="5">
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                </span>
                                            </div>
                                            <div class="releasedTime">昨天 01:16</div>
                                        </div>
                                        <div class="content">
                                            <div class="title">弱国无外交（会部分剧透）</div>
                                            <div class="text">
                                                看完感触很多。最主要是，在每一次撤侨行动中，外交官司令官工作人员都是最美的逆行者。弱国无外交。只有到了国外，才会无比感谢祖国能够昌盛繁荣强大起来。这样无论是政府军还是反叛军，拿枪指着你的时候都会有所顾忌。在那些战火纷乱的地方，中国护照是你的保命符、通行证。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="reviewItem">
                                        <div class="userInfo flexBox">
                                            <div class="user">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">慢慢慢生活</span>
                                            </div>
                                            <div class="rating flexBox">
                                                <span class="status">看过</span>
                                                <span class="rating_stars small flexBox" data-rating="5">
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                </span>
                                            </div>
                                            <div class="releasedTime">昨天 01:16</div>
                                        </div>
                                        <div class="content">
                                            <div class="title">弱国无外交（会部分剧透）</div>
                                            <div class="text">
                                                看完感触很多。最主要是，在每一次撤侨行动中，外交官司令官工作人员都是最美的逆行者。弱国无外交。只有到了国外，才会无比感谢祖国能够昌盛繁荣强大起来。这样无论是政府军还是反叛军，拿枪指着你的时候都会有所顾忌。在那些战火纷乱的地方，中国护照是你的保命符、通行证。
                                            </div>
                                        </div>
                                    </div>
                                    <div class="reviewItem">
                                        <div class="userInfo flexBox">
                                            <div class="user">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">慢慢慢生活</span>
                                            </div>
                                            <div class="rating flexBox">
                                                <span class="status">看过</span>
                                                <span class="rating_stars small flexBox" data-rating="5">
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                    <span class="rating_stars_item rating_stars_item_full small"></span>
                                                </span>
                                            </div>
                                            <div class="releasedTime">昨天 01:16</div>
                                        </div>
                                        <div class="content">
                                            <div class="title">弱国无外交（会部分剧透）</div>
                                            <div class="text">
                                                看完感触很多。最主要是，在每一次撤侨行动中，外交官司令官工作人员都是最美的逆行者。弱国无外交。只有到了国外，才会无比感谢祖国能够昌盛繁荣强大起来。这样无论是政府军还是反叛军，拿枪指着你的时候都会有所顾忌。在那些战火纷乱的地方，中国护照是你的保命符、通行证。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="discussList">
                                <div class="head flexBox">
                                    <div class="text">讨论列表</div>
                                    <div class="tagSwitch">
                                        <div class="container flexBox">
                                            <div class="tag" data-index="1">最新</div>
                                            <div class="tag" data-index="2">热门</div>
                                            <div class="tag" data-index="3">热点</div>
                                        </div>
                                        <div class="moveBox"></div>
                                    </div>
                                </div>
                                <div class="main">
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply50"></span>
                                            <span class="number">3</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">张译撑起了整部戏！王俊凯（看看四字弟弟，演习需要天分啊！）</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">o浆糊o</span>
                                                <span class="time">1小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply50"></span>
                                            <span class="number">3</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">普通人拼尽全力更动人</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/jiji.jpg" alt=""></span>
                                                <span class="name">素食女人</span>
                                                <span class="time">4小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply100"></span>
                                            <span class="number">154</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">画面很有亮点</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/spider.png" alt=""></span>
                                                <span class="name">蒿里</span>
                                                <span class="time">4小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply100"></span>
                                            <span class="number">437</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">万里归途，祖国万岁</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/avatar.jpg" alt=""></span>
                                                <span class="name">微信用户</span>
                                                <span class="time">4小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply50"></span>
                                            <span class="number">32</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">#张译 阿语# 没有这个热搜，我是不理解的</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/haer.jpg" alt=""></span>
                                                <span class="name">我不懂</span>
                                                <span class="time">4小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply500"></span>
                                            <span class="number">550</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">万里归途是一部成功的商业大片</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/haer.jpg" alt=""></span>
                                                <span class="name">无悔本心</span>
                                                <span class="time">4小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply50"></span>
                                            <span class="number">11</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">王俊凯的演技真的超级优秀</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">Master九豆瓣</span>
                                                <span class="time">昨天 23:20更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply100"></span>
                                            <span class="number">424</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">万里归途感觉是一部很宏大的商业片</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">Karlight</span>
                                                <span class="time">6小时前更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply50"></span>
                                            <span class="number">3</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">影片最后宗大伟为什么开俄罗斯转盘游戏的最后一枪？</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">今心可可</span>
                                                <span class="time">昨天 21:42更新</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discussItem flexBox">
                                        <div class="topic_heat flexBox">
                                            <span class="iconfont reply50"></span>
                                            <span class="number">6</span>
                                        </div>
                                        <div class="content flexBox">
                                            <div class="title">星星点灯跟一千零一夜设计得好巧妙啊</div>
                                            <div class="userInfo">
                                                <span class="avatar"><img src="./img/Hilda.jpg" alt=""></span>
                                                <span class="name">momo</span>
                                                <span class="time">昨天 21:41更新</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="film_review_head fake">
                <div class="module_switch flexBox">
                    <a href="javascript:void(0);" class="current" data-index="1">影评</a>
                    <a href="javascript:void(0);"  data-index="2">讨论</a>
                    <span class="afterSlider"></span>
                </div>
            </div>
        </footer>
    </div>

    
    <script src="./lib/jquery-3.6.1.min.js"></script>
    <script src="./lib/EasyLazyload.min.js"></script>
    <script src="./lib/jquery.bcakgroundColor.js"></script>
    <script src="./js/app-public.js"></script>
    <script>
        // 全局变量
        var r = 0, g = 0, b = 0;
        $(function(){
            // 返回上一页
            $('header .functional_domain .back').on('click',function(){
                window.history.back();
            })

            

            var footerScrollTop = $('footer').offset().top - document.documentElement.scrollTop;
            console.log(footerScrollTop);
            // 滚动到一定位置 头部内容切换
            $(window).scroll(function(){
                // var elTop = $('section.movieInfo').offset().top;   // 元素举例浏览器顶部的偏移量
                // var docTop = $(document).scrollTop();              // 文档流的偏移量
                
                // var rgb = `rgb(${r},${g},${b})`;
                // console.log(rgb);

                // if(docTop >= elTop){
                //     $('.occupying_area ul').stop().animate({
                //         top:'-50px'
                //     },200);
                //     $('.occupying_area ul .scroll_bottom').stop().animate({
                //         opacity:1
                //     },200);
                //     $('header').stop().animate({
                //         backgroundColor:rgb
                //     },200);
                // }
                // else{
                //     $('.occupying_area ul').stop().animate({
                //         top:'0px'
                //     },200);
                //     $('.occupying_area ul .scroll_bottom').stop().animate({
                //         opacity:0
                //     },200);
                //     $('header').stop().animate({
                //         backgroundColor:'rgba(0,0,0,0)'
                //     },200);
                // }

                
                // var fake_film_review_ScrollTop = $('footer').offset().top - document.documentElement.scrollTop;
                // console.log(fake_film_review_ScrollTop);
                // var actual_film_review_ScrollTop = $('.film_review').offset().top - document.documentElement.scrollTop;
                // console.log(actual_film_review_ScrollTop);
                // if(actual_film_review_ScrollTop <= fake_film_review_ScrollTop){
                //     $('footer').hide();
                // }
                // else if(actual_film_review_ScrollTop > fake_film_review_ScrollTop){
                //     $('footer').show();
                // }
            })
        })

        $('.film_review').css('height',$('.reviewList').css('height'));
        $(window).scroll(function(e){
            var elTop = $('section.movieInfo').offset().top;   // 元素举例浏览器顶部的偏移量
            var docTop = $(document).scrollTop();              // 文档流的偏移量
            
            var rgb = `rgb(${r},${g},${b})`;

            if(docTop >= elTop){
                $('.occupying_area ul').stop().animate({
                    top:'-50px'
                },200);
                $('.occupying_area ul .scroll_bottom').stop().animate({
                    opacity:1
                },200);
                $('header').stop().animate({
                    backgroundColor:rgb
                },200);
            }
            else{
                $('.occupying_area ul').stop().animate({
                    top:'0px'
                },200);
                $('.occupying_area ul .scroll_bottom').stop().animate({
                    opacity:0
                },200);
                $('header').stop().animate({
                    backgroundColor:'rgba(0,0,0,0)'
                },200);
            }

            var screenHeight = window.screen.height;
            var fake_hei = $('footer .fake').get(0).offsetHeight;
            var film_review_top = $('.film_review').offset().top;
            console.log(film_review_top,docTop,screenHeight,fake_hei)
            if(film_review_top - docTop <= screenHeight - fake_hei){
                $('footer .fake').css('display','none');
            }
            else{
                $('footer .fake').css('display','block');
            }

            if(film_review_top - docTop <= 50){
                $('.review_container').addClass('fixed');
            }
            else{
                $('.review_container').removeClass('fixed');
            }
        })


        // 初始化滑块位置 和 点击事件
        afterSlideFunc(2);
        // 点击时 切换模块
        var screen_width = window.screen.width;     //屏幕宽度
        $('.module_switch').on('click',function(e){
            var index = e.target.dataset.index;
            if(index){
                // if(index == 2) $(window).scrollTop(0);  //点击 动态时  回到顶部
                
                var container_left = - (index - 1) * screen_width + 'px';          // 模块切换 修改ul的left值
                console.log(container_left);
                $('.film_review ul').css('left',container_left);
            }
        })

        // 滑块切换
        $('.reviewList .tagSwitch').on('click',function(e){
            var index = e.target.dataset.index;
            console.log(index)
            if(index){
                var left = (index-1) * 35;
                $(this).find('.moveBox').css('left',left+'px');
            }
        })
        $('.discussList .tagSwitch').on('click',function(e){
            var index = e.target.dataset.index;
            console.log(index)
            if(index){
                var left = (index-1) * 35;
                $(this).find('.moveBox').css('left',left+'px');
            }
        })
    </script>

    <script>
        // 数据渲染
        $(function(){
            var doubanId = window.location.href.split('?')[1].split('=')[1];   // 通过 href 获取doubanId


            // 获取电影详细信息
            movie_info_ajax = $.ajax({
                type:'get',
                data:{doubanId},
                url:'/getMovieDetail',
                async:true,
                cache:false,
                success:function(res){
                    console.log('获取电影详细信息',res.msg);
                    if(res.msg){
                        var data = res.data;
                        var poster = 'https://images.weserv.nl/?url='+data.poster,      // 海报
                            originalName = data.originalName,                           // 电影名
                            country = data.country,                                     // 国家
                            language = data.language,                                   // 语言
                            year = data.year,                                           // 年份
                            dateReleased = data.dateReleased,                           // 发布时间
                            duration = data.duration,                                   // 片长
                            description = data.description,                             // 简介
                            doubanRating = data.doubanRating,                           // 豆瓣评分
                            doubanVotes = data.doubanVotes,                             // 豆瓣评分人数
                            proportion = data.proportion,                               // 星级 占比
                            wantToSee = data.wantToSee,                                 // 想看
                            seen = data.seen,                                           // 看过
                            staff = data.staff,                                         // 演职员总数
                            director = data.director[0],                                // 导演 取1个
                            actor = data.actor.splice(0,5),                             // 演员 取5个
                            writer = data.writer[0],                                    // 编剧 取1个
                            stillsNum = data.stillsNum,                                 // 剧照 总数
                            stills = data.stills;                                       // 剧照 数组

                        
                        // 电影类型拼接
                        var genres = '';
                        if(data.genre.length > 0){
                            data.genre.forEach((item)=>{
                                genres += `<span>${item}</span>`;
                            })
                        }

                        // 星级 和 是否为暂无评分的类名
                        var spanRatingStarBox = ratingStarCalculate(doubanRating)[0];
                        var hasRating = ratingStarCalculate(doubanRating)[1];

                        // 头部header 电影信息
                        // 豆瓣评分数字 不为0 或 ==0
                        if(doubanRating == 0){doubanRating = '暂无评分';}
                        var header_movie_info = `<div class="poster_s">
                                                    <img src="${poster}" alt="" class="poster">
                                                </div>
                                                <div class="info flexBox">
                                                    <div class="name">${originalName}</div>
                                                        <div class="rating ${hasRating} flexBox">
                                                            ${spanRatingStarBox}
                                                            <span class="rating_num">${doubanRating}</span>
                                                        </div>
                                                </div>`;
                        $('header .functional_domain .occupying_area .scroll_bottom').html(header_movie_info);


                        // 内容main-电影信息模块
                        var section_movie_info = `<div class="posterArea">
                                                        <img src="${poster}" alt="" class="poster bigOne" crossorigin="">
                                                    </div>
                                                    <div class="info flexBox">
                                                        <div class="hd originalName">
                                                            <h1>${originalName}</h1>
                                                            <div class="year">(${year})</div>
                                                        </div>
                                                        <div class="mid basicInfoArea">
                                                            <span class="container">
                                                                <span class="country">${country}</span>
                                                                /
                                                                <span class="genre">${genres}</span>
                                                                /
                                                                <span class="dateReleased">${dateReleased}上映</span>
                                                                /
                                                                <span class="duration">片长${duration}</span>
                                                                <span class="iconfont">&#xe6a3;</span>
                                                            </span>
                                                        </div>
                                                        <div class="bd btnArea flexBox">
                                                            <div class="wantToSee">
                                                                <span class="iconfont"></span>
                                                                <span>想看</span>
                                                            </div>
                                                            <div class="seen">
                                                                <span class="iconfont"></span>
                                                                <span>看过</span>
                                                            </div>
                                                        </div>
                                                    </div>`;
                        $('section.movieInfo').html(section_movie_info);


                        // 豆瓣评分
                        var section_ratingArea = `<div class="container ${hasRating} flexBox">`;
                        if(doubanRating !== '暂无评分'){
                            section_ratingArea += `<div class="hd flexBox">
                                                        <span class="reg">豆瓣评分<span>&reg;</span></span>
                                                        <span class="iconfont">&#xe6a3;</span>
                                                    </div>
                                                    <div class="mid flexBox">
                                                        <div class="ratingBox flexBox">
                                                            <div class="rating ${hasRating} flexBox">
                                                                <span class="rating_num">${doubanRating}</span>
                                                                ${spanRatingStarBox}
                                                            </div>
                                                            <div class="rating_stars_chart flexBox">
                                                                <div class="star_stats flexBox">
                                                                    <div class="stats_wrap">
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                    </div>
                                                                    <div class="chart_wrap">
                                                                        <span class="rating_progress" style="width: ${proportion[0]}%;"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="star_stats flexBox">
                                                                    <div class="stats_wrap">
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                    </div>
                                                                    <div class="chart_wrap">
                                                                        <span class="rating_progress" style="width: ${proportion[1]}%;"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="star_stats flexBox">
                                                                    <div class="stats_wrap">
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                    </div>
                                                                    <div class="chart_wrap">
                                                                        <span class="rating_progress" style="width: ${proportion[2]}%;"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="star_stats flexBox">
                                                                    <div class="stats_wrap">
                                                                        <span class="rating_star_icon"></span>
                                                                        <span class="rating_star_icon"></span>
                                                                    </div>
                                                                    <div class="chart_wrap">
                                                                        <span class="rating_progress" style="width: ${proportion[3]}%;"></span>
                                                                    </div>
                                                                </div>
                                                                <div class="star_stats flexBox">
                                                                    <div class="stats_wrap">
                                                                        <span class="rating_star_icon"></span>
                                                                    </div>
                                                                    <div class="chart_wrap">
                                                                        <span class="rating_progress" style="width: ${proportion[4]}%;"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="votesArea">
                                                            <span class="votes">${doubanVotes}人评分</span>
                                                        </div>
                                                    </div>
                                                    <div class="bd">
                                                        <span class="seen_num">${seen}人看过</span>
                                                        <span class="wantToSee_num">${wantToSee}人想看</span>
                                                    </div>`;
                        }
                        else{
                            section_ratingArea += `<div class="mid flexBox">
                                                    <div class="ratingBox flexBox">
                                                            <div class="rating flexBox">
                                                                <div class="hd flexBox">
                                                                    <span class="reg">豆瓣评分<span>&reg;</span></span>
                                                                </div>
                                                                <span class="rating_num">${doubanRating}</span>
                                                                <span>已看过?<a href="javascript:void(0);">发表评分</a></span>
                                                            </div>
                                                            <div class="rating_stars_chart flexBox">
                                                                <span class="wantToSee_num">${wantToSee}人想看</span>
                                                            </div>
                                                        </div>
                                                    </div>`;
                        }
                        section_ratingArea += '</div>';
                        $('section.ratingArea').html(section_ratingArea);


                        // 简介
                        var section_introduction = `<div class="hd">
                                                        <span class="title">简介</span>
                                                    </div>
                                                    <div class="bd">
                                                        <div class="long_text">${description}</div>
                                                        <div class="complaint">
                                                            <span>投诉简介</span>
                                                        </div>
                                                    </div>`;
                        $('section.introduction').html(section_introduction);
                        // 文本溢出处理
                        var longTextObj = $('section.introduction .long_text').get(0)
                        moreLine(longTextObj,4,longTextObj.innerText,'show','展开');


                        // 演职员
                        var section_castMembers = `<div class="hd flexBox">
                                                        <span class="title">演职员</span>
                                                        <span class="all_more">全部${staff}
                                                            <span class="iconfont">&#xe6a3;</span>
                                                        </span>
                                                    </div>
                                                    <div class="bd">
                                                        <div class="container">`;
                        var memberList = '';
                        // 导演
                        memberList +=  `<a href="javascript:void(0);" class="member_item">
                                            <div class="hd">
                                                <div class="size_cover">
                                                    <div class="img"></div>
                                                    <div class="size_cover_background" style="background: url('https://images.weserv.nl/?url=${director.data[0].portrait}') center center / cover no-repeat;"></div>
                                                </div>
                                            </div>
                                            <div class="bd">
                                                <div class="name">${director.data[0].name}</div>
                                                <div class="role">导演</div>
                                            </div>
                                        </a>`;
                        // 演员
                        actor.forEach((item)=>{
                            memberList +=  `<a href="javascript:void(0);" class="member_item">
                                                <div class="hd">
                                                    <div class="size_cover">
                                                        <div class="img"></div>
                                                        <div class="size_cover_background" style="background: url('https://images.weserv.nl/?url=${item.data[0].portrait}') center center / cover no-repeat;"></div>
                                                    </div>
                                                </div>
                                                <div class="bd">
                                                    <div class="name">${item.data[0].name}</div>
                                                    <div class="role">
                                                        饰&nbsp;${item.data[0].role}
                                                    </div>
                                                </div>
                                            </a>`;
                        })
                        // 编剧
                        memberList +=  `<a href="javascript:void(0);" class="member_item">
                                            <div class="hd">
                                                <div class="size_cover">
                                                    <div class="img"></div>
                                                    <div class="size_cover_background" style="background: url('https://images.weserv.nl/?url=${writer.data[0].portrait}') center center / cover no-repeat;"></div>
                                                </div>
                                            </div>
                                            <div class="bd">
                                                <div class="name">${writer.data[0].name}</div>
                                                <div class="role">编剧</div>
                                            </div>
                                        </a>`;
                        section_castMembers += memberList;
                        section_castMembers += '</div></div>';
                        $('section.castMembers').html(section_castMembers);


                        // 预告片 剧照
                        var section_trailer_stills = `<div class="hd flexBox">
                                                        <span class="title">预告片 / 剧照</span>
                                                        <span class="all_more">全部${stillsNum}
                                                            <span class="iconfont">&#xe6a3;</span>
                                                        </span>
                                                    </div>
                                                    <div class="bd">
                                                        <div class="container">
                                                            <a href="javascript:void(0);">
                                                                <img src="https://images.weserv.nl/?url=${stills[0]}" alt="">
                                                                <span class="playBtn"></span>
                                                                <span class="tag">预告片</span>
                                                                <span class="time">02:04</span>
                                                            </a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[1]}" alt=""></a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[2]}" alt=""></a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[3]}" alt=""></a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[4]}" alt=""></a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[5]}" alt=""></a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[6]}" alt=""></a>
                                                            <a href="javascript:void(0);"><img src="https://images.weserv.nl/?url=${stills[7]}" alt=""></a>
                                                        </div>
                                                    </div>`;
                        $('section.trailerStills').html(section_trailer_stills);

                    }
                },
                error:function(err){
                    console.log('err',err);
                }
            })


            // 获取电影-短评
            $.ajax({
                type:'get',
                data:{doubanId},
                url:'/getShortComments',
                async:true,
                success:function(res){
                    console.log('获取电影短评成功',res.msg);

                    var commentList = res.data.comments;

                    var short_comments = `<div class="hd flexBox">
                                                <span class="title">短评
                                                    <span class="iconfont">&#xe624;</span>
                                                </span>
                                                <span class="all_more">
                                                    全部${res.data.commentNum}
                                                    <span class="iconfont">&#xe6a3;</span>
                                                </span>
                                            </div>
                                            <div class="bd">`;
                    commentList.forEach((item)=>{
                        var spanRatingStarBox = ratingStarCalculate(item.rating)[0];// 星级盒子

                        var commentItem = `<div class="comment_item">
                                                <div class="userInfo flexBox">
                                                    <div class="avatar"><img src="https://images.weserv.nl/?url=${item.portrait}" alt=""></div>
                                                    <div class="info">
                                                        <div class="username top">${item.username}</div>
                                                        <div class="bottom flexBox">
                                                            <div class="rating flexBox">
                                                                ${spanRatingStarBox}
                                                            </div>
                                                            <span class="releasedTime_area">
                                                                <span class="date">${item.dateReleased}</span>
                                                                <span class="time">${item.timeReleased}</span>
                                                                <span class="area">${item.region}</span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="more">
                                                        <span class="iconfont">&#xe719;</span>
                                                    </div>
                                                </div>
                                                <div class="long_text">${item.contents}</div>
                                                <div class="thumbsUp">
                                                    <span class="iconfont">&#xe696;</span>
                                                    <span class="num">${item.thumbs}</span>
                                                </div>
                                            </div>`;
                        short_comments += commentItem;
                    })
                    short_comments += `<div class="end flexBox">
                                            <span>查看全部短评</span>
                                            <span class="iconfont">&#xe6a3;</span>
                                        </div>
                                    </div>`;
                    $('section.shortComments').html(short_comments);
                    // 文本溢出处理
                    var contentBox = $('section.shortComments .long_text');
                    var showBtn_className = 'show';
                    contentBox.each((index,item)=>{
                        var itemText = item.innerText;
                        moreLine(item,4,itemText,showBtn_className,'展开');
                    })

                    // 点赞
                    console.log($('.thumbsUp span.iconfont'));
                    thumbsUpFunc();
                },
                error:function(err){
                    console.log('err',err);
                }
            })
            

            // 获取电影-影评
            $.ajax({
                type:'get',
                data:{doubanId},
                url:'/getFilmReviews',
                async:true,
                success:function(res){
                    console.log('获取电影影评成功',res.msg);

                    var commentList = res.data.reviews;
                    
                },
                error:function(err){
                    console.log('err',err);
                }
            })
            

            // 获取电影-讨论
            $.ajax({
                type:'get',
                data:{doubanId},
                url:'/getFilmDiscusses',
                async:true,
                success:function(res){
                    console.log('获取电影讨论成功',res.msg);

                    var commentList = res.data.discusses;
                    
                },
                error:function(err){
                    console.log('err',err);
                }
            })


            // 在电影详细信息 的 ajax 执行完成后，获取海报，再获取海报的rgb颜色值
            // 设置页面的背景颜色
            $.when(movie_info_ajax).done(function(){

                var bigPoster = document.querySelector('.bigOne');   // 海报 img元素
                var canvas = document.getElementById("myCanvas");    // canvas 画布

                if(bigPoster.complete){
                    console.log('当前有缓存')
                }
                else{
                    console.log('当前无缓存，需要重新加载一下');
                    bigPoster.onload = function(){
                        console.log('img加载成功')
                        var rgbObj = getImageColor(bigPoster,canvas);               // 调用方法 获取rgb值
                
                        r = parseInt(rgbObj.r);
                        g = parseInt(rgbObj.g);
                        b = parseInt(rgbObj.b);
                        console.log(r,g,b);
                        var bgImg = `linear-gradient(rgb(${r+28},${g+25},${b+24})0%,rgb(${r},${g},${b})100%)`;
                        $('.mobile').css('background-image',bgImg);
                    }
                }
            })
    
        })
    </script>
</body>
</html>